<template>
	<div class="page flex-col">
		<!-- 头部跳转 -->
		<el-page-header class="m-b-10" icon="ArrowLeft" :content="title" @back="$router.go(-1)" />
		<my-process ref="refNode" :xml="xml" :is-view="false" @save="save" @showXML="showXML" :categorys="$store.dict.flowForm" />
		<!--在线查看xml-->
		<el-dialog :title="xmlTitle" v-model="xmlOpen" width="70%" append-to-body draggable>
			<div style=" height: 70vh;overflow: auto">
				<pre v-highlight><code class="xml">{{ xmlContent }}</code></pre>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
import { getByIdFlow, saveDefinition } from '@a/business';
import vkbeautify from 'vkbeautify';
import Hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/atom-one-dark.css';
import xmllanguage from 'highlight.js/lib/languages/xml';

const { title, id } = useRoute().query;

let xml = ref(''),
	xmlOpen = ref(false),
	xmlTitle = ref(''),
	xmlContent = ref('');

// 自定义指令
const vHighlight = {
	beforeMount(el) {
		let blocks = el.querySelectorAll('pre code');
		Hljs.registerLanguage('xml', xmllanguage);
		blocks.forEach((block) => {
			Hljs.highlightBlock(block);
		});
	}
};

if (id) getInfo();
function getInfo() {
	getByIdFlow({ deployId: id }).then((res) => {
		xml.value = res.data.xml;
	});
}
/** 保存xml */
function save(data) {
	saveDefinition({
		id,
		xml: data.xml,
		category: data.process.category
	}).then(() => {
		msgSuccess('保存成功');
		$router.go(-1);
	});
}
/** 展示xml */
function showXML(data) {
	xmlTitle.value = 'xml查看';
	xmlOpen.value = true;
	xmlContent.value = vkbeautify.xml(data);
}

$store.dict.GETflowForm();
</script>
